<html lang="en"><head>

    <meta charset="UTF-8">

    <link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png">
    <meta name="apple-mobile-web-app-title" content="CodePen">

    <link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico">

    <link rel="mask-icon" type="" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111">


    <title>CodePen - ScrollTrigger: SVG Text Mask</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">



    <style>
        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap');

        body, html {
            width:100%;
            height:100%;
            background:#ddd;
            font-family: 'Montserrat', sans-serif;
            font-size:99px;
            text-align:center;
        }

        div {
            position:absolute;
        }
    </style>

    <script>
        window.console = window.console || function(t) {};
    </script>
    <script>
        if (document.location.search.match(/type=embed/gi)) {
            window.parent.postMessage("resize", "*");
        }
    </script>


</head>

<body translate="no" style="">
<!-- This is a recreation of Unfold's (https://dribbble.com/unfold) parallax scene: https://cdn.dribbble.com/users/14268/screenshots/3275340/northface.gif -->
<div class="scrollDist" style="height: 200%; width: 100%;"></div>
<div class="main" style="transform: translate(-50%, 0px); left: 50%; top: 0px; height: 100%; max-width: 1200px; width: 100%; background: rgb(255, 255, 255); position: fixed;">
    <svg viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg">
        <mask id="m">
            <g class="cloud1" data-svg-origin="0 0" transform="matrix(1,0,0,1,0,100)" style="transform-origin: 0px 0px;">
                <rect fill="#fff" width="100%" height="801" y="799"></rect>
                <image xlink:href="https://assets.codepen.io/721952/cloud1Mask.jpg" width="1200" height="800"></image>
            </g>
        </mask>

        <image class="sky" xlink:href="https://assets.codepen.io/721952/sky.jpg" width="1200" height="590" data-svg-origin="0 0" transform="matrix(1,0,0,1,0,0)" style="transform-origin: 0px 0px;"></image>
        <image class="mountBg" xlink:href="https://assets.codepen.io/721952/mountBg.png" width="1200" height="800" data-svg-origin="0 0" transform="matrix(1,0,0,1,0,-10)" style="transform-origin: 0px 0px;"></image>
        <image class="mountMg" xlink:href="https://assets.codepen.io/721952/mountMg.png" width="1200" height="800" data-svg-origin="0 0" transform="matrix(1,0,0,1,0,-30)" style="transform-origin: 0px 0px;"></image>
        <image class="cloud2" xlink:href="https://assets.codepen.io/721952/cloud2.png" width="1200" height="800" data-svg-origin="0 0" transform="matrix(1,0,0,1,0,-150)" style="transform-origin: 0px 0px;"></image>
        <image class="mountFg" xlink:href="https://assets.codepen.io/721952/mountFg.png" width="1200" height="800" data-svg-origin="0 0" transform="matrix(1,0,0,1,0,-50)" style="transform-origin: 0px 0px;"></image>
        <image class="cloud1" xlink:href="https://assets.codepen.io/721952/cloud1.png" width="1200" height="800" data-svg-origin="0 0" transform="matrix(1,0,0,1,0,100)" style="transform-origin: 0px 0px;"></image>
        <image class="cloud3" xlink:href="https://assets.codepen.io/721952/cloud3.png" width="1200" height="800" data-svg-origin="0 0" transform="matrix(1,0,0,1,0,-50)" style="transform-origin: 0px 0px;"></image>
        <text fill="#fff" x="350" y="200">EXPLORE</text>
        <polyline class="arrow" fill="#fff" points="599,250 599,289 590,279 590,282 600,292 610,282 610,279 601,289 601,250" data-svg-origin="590 250" transform="matrix(1,0,0,1,0,0)" style="transform-origin: 0px 0px;"></polyline>

        <g mask="url(#m)">
            <rect fill="#fff" width="100%" height="100%"></rect>
            <text x="350" y="200" fill="#162a43">FURTHER</text>
        </g>

        <rect id="arrowBtn" width="100" height="100" opacity="0" x="550" y="220" style="cursor:pointer"></rect>
    </svg>
</div>
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-157cd5b220a5c80d4ff8e0e70ac069bffd87a61252088146915e8726e5d9f147.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollTrigger.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollToPlugin3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
<script id="rendered-js">
    gsap.set('.main', { position: 'fixed', background: '#fff', width: '100%', maxWidth: '1200px', height: '100%', top: 0, left: '50%', x: '-50%' });
    gsap.set('.scrollDist', { width: '100%', height: '200%' });
    gsap.timeline({ scrollTrigger: { trigger: '.scrollDist', start: 'top top', end: 'bottom bottom', scrub: 1 } }).
    fromTo('.sky', { y: 0 }, { y: -200 }, 0).
    fromTo('.cloud1', { y: 100 }, { y: -800 }, 0).
    fromTo('.cloud2', { y: -150 }, { y: -500 }, 0).
    fromTo('.cloud3', { y: -50 }, { y: -650 }, 0).
    fromTo('.mountBg', { y: -10 }, { y: -100 }, 0).
    fromTo('.mountMg', { y: -30 }, { y: -250 }, 0).
    fromTo('.mountFg', { y: -50 }, { y: -600 }, 0);
    $('#arrowBtn').on('mouseenter', e => {gsap.to('.arrow', { y: 10, duration: 0.8, ease: 'back.inOut(3)', overwrite: 'auto' });});
    $('#arrowBtn').on('mouseleave', e => {gsap.to('.arrow', { y: 0, duration: 0.5, ease: 'power3.out', overwrite: 'auto' });});
    $('#arrowBtn').on('click', e => {gsap.to(window, { scrollTo: innerHeight, duration: 1.5, ease: 'power1.inOut' });}); // scrollTo requires the ScrollTo plugin (not to be confused w/ ScrollTrigger)
    //# sourceURL=pen.js
</script>







</body></html>
